<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我也不知道叫什么 然后看完你就成了才</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/header.css" />
	<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
<div class="header">
	<div class="header-logo-bar">
		<div class="header-logo-msg">
			<!--<div class="logo">

			</div>
			<div class="logo">

			</div>-->
		</div>
		<div class="header-personal-message">
			<span><a href="#">login</a></span>
			<span><a href="#">register</a></span>
			<div class="profile-photo">

			</div>
		</div>
	</div>
	<div class="nav-bar">
		<ul class="nav">
			<a href="{:url('index/index/homePage')}">首页</a>
		</ul>
		<ul>
			<a href="#">前端</a>
			<ul class="plat">
				<li><a href="{:url('index/index/course')}">HTML</a></li>
				<li><a href="#">CSS</a></li>
				<li><a href="#">Javascript</a></li>
			</ul>
		</ul>
		<ul>
			<a href="#">后端</a>
			<ul class="plat">
				<li><a href="#">Java</a></li>
				<li><a href="#">c++</a></li>
				<li><a href="#">PHP</a></li>
				<li><a href="#">python</a></li>
			</ul>
		</ul>
		<ul>
			<a href="#">移动</a>
			<ul class="plat">
				<li><a href="#">ios</a></li>
				<li><a href="#">Android</a></li>
			</ul>
		</ul>
		<ul>
			<a href="#">数据库</a>
			<ul class="plat">
				<li><a href="#">MySQL</a></li>
				<li><a href="#">SQLServer</a></li>
				<li><a href="#">Oracle</a></li>
			</ul>
		</ul>
	</div>
</div>
	<script type="text/javascript">
		$(document).ready(function(){
		  $("div.profile-photo").mouseenter(function(){
		    $("div.personal-msg").show(500);
		  });
		  $("div.personal-msg").mouseleave(function(){
		    $("div.personal-msg").hide(500);
		  });
		   $("div.nav-bar").mouseenter(function(){
		    $("div.personal-msg").hide(500);
		  });
		});
	</script>
	</body>
</html>
